<template>
	<view class="add">
		<u--form labelPosition="left" labelWidth='80' :model="dataForm" :rules="rules" ref="uForm">
			<view class="top">
			</view>
			<view class="theme">
				<view class="left">
					<view class="image">
						<image :src="src" mode=""></image>
					</view>
					<view class="text">
						{{name}}
					</view>
				</view>
				<view class="right" @click="show=true">
					<span v-if="dataForm.money">
						{{dataForm.money}}
					</span>
					<span v-else>0</span>
				</view>
			</view>
			<view class="type">
				<view class="box" @click="src=item.src,name=item.name,dataForm.type=item.name" v-for="item in list"
					:key='item'>
					<view class="image">
						<image :src="item.src" mode=""></image>
					</view>
					<view class="text">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="form">
				<u-form-item label="账本:" prop="accID" ref="item1">
					<span @click='showpicker=true'>
						{{name2}}
					</span>
				</u-form-item>
				<u-form-item label="付款时间:" prop="time" ref="item1">
					<uni-datetime-picker type="date" :clear-icon="false" :border='false' v-model="dataForm.time" />
				</u-form-item>
				<u-form-item label="付款照片:" prop="img" ref="item1">
					<div class="image">
						<view class="box" v-for="item,index in dataForm.img" :key="index">
							<image @click="previewImage(item)" :src="item" mode=""></image>
							<view class="delet" @click="deleteimg(index)">
								<u-icon name="close" color='#fff' size="10"></u-icon>
							</view>
						</view>
						<u-icon @click="upload" name="camera-fill" size="38"></u-icon>
					</div>
				</u-form-item>
				<u-form-item label="备注:" prop="remark" ref="item1">
					<u-input v-model="dataForm.remark" :type="type" border="none" placeholder="请输入备注" />
				</u-form-item>

			</view>
			<u-picker :show="showpicker" :columns="accList" keyName="name" @cancel='close'
				@confirm='confirm'></u-picker>
			<u-keyboard @change="valChange" :closeOnClickOverlay='true' @close='closeshow' @backspace="backspace"
				:tooltip='false' :overlay='true' mode="number" :show="show">
			</u-keyboard>
		</u--form>
		<view @click="submit" class="submit">提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				showpicker: false,
				accList: [uni.getStorageSync('accID')],
				datetime: false,
				value: '',
				list: [{
						name: "吃喝",
						src: "../../static/bookeepingIcon/chihewanle.png",
						type: 0,
					},
					{
						name: "交通",
						src: "../../static/bookeepingIcon/bus-alt.png",
						type: 1,
					},
					{
						name: "娱乐",
						src: "../../static/bookeepingIcon/yuleAPP.png",
						type: 2,
					}, {
						name: "酒店",
						src: "../../static/bookeepingIcon/hotel.png",
						type: 3,
					}, {
						name: "水电",
						src: "../../static/bookeepingIcon/shuidianjiaofei.png",
						type: 4,
					}, {
						name: "房租",
						src: "../../static/bookeepingIcon/fangzu.png",
						type: 5,
					}, {
						name: "买菜",
						src: "../../static/bookeepingIcon/huluobu.png",
						type: 6,
					}, {
						name: "购物",
						src: "../../static/bookeepingIcon/shopping2.png",
						type: 7,
					}, {
						name: "门票",
						src: "../../static/bookeepingIcon/menpiao-copy.png",
						type: 8,
					}
				],
				src: "../../static/bookeepingIcon/chihewanle.png",
				name: "吃喝",
				name2: "请选择账本",
				dataForm: {
					founder: uni.getStorageSync('userInfo').nickName,
					founderId: uni.getStorageSync('userInfo')._id,
					accID: '',
					time: '',
					money: "",
					img: [],
					type: '吃喝',
					remark: "",
				},
				rules: {
					time: {
						required: true,
						message: '请选择时间',
						trigger: ['blur', 'change']
					},
					remark: {
						required: true,
						message: '请说明备注',
						trigger: ['blur', 'change']
					},
					accID: {
						required: true,
						message: '请选择账本',
						trigger: ['blur', 'change']
					},
				}
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
			if (!uni.getStorageSync('userInfo')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		},
		methods: {
			confirm(e) {
				this.name2 = e.value[0].name
				this.dataForm.accID = e.value[0]._id
				this.showpicker = false
			},
			close() {
				this.showpicker = false
			},
			previewImage(e) {
				let that = this
				uni.previewImage({
					urls: that.dataForm.img
				})
			},
			submit() {
				let _this = this;
				if (!this.dataForm.money) {
					return uni.showToast({
						title: '请输入账单金额',
						icon: 'error',
						complete() {
							_this.show = true
						}
					});
				}
				let data = this.dataForm
				this.$refs.uForm.validate().then(res => {
					// uni.$u.toast('校验通过')
					_this.$cloudApi.call({
						name: 'addBill',
						data,
						success: res => {
							// uni.reLaunch({
							// 	url: '/pages/index/index'
							// })
							uni.showToast({
								title: '记账成功',
								icon: 'success',
								complete() {
									_this.dataForm.money = ''
									_this.dataForm.remark = ''
									_this.dataForm.img = []
									_this.dataForm.time = ''
								}
							});
						}
					});
				}).catch(errors => {
					// 
				})
			},
			deleteimg(i) {
				this.dataForm.img.splice(i, 1)
			},
			upload() {
				let that = this
				// 选择图片，默认不设置count属性的话最多9张
				uni.chooseImage({
					success(res) {
						console.log(res);
						// 通过遍历调用uniCloud.uploadFile来批量上传
						// that.dataForm.img.push(...res.tempFilePaths)
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							uni.showLoading({
								title: "上传中..."
							})
							let filePath = res.tempFilePaths[i] // 选择图片的临时路径
							const name = res.tempFilePaths[i] // 选择图片的名称.后缀名
							let pos = name.lastIndexOf('/') // '/'所在的最后位置
							let str = name.substr(pos + 1) //截取文件名称和后缀  
							uniCloud.uploadFile({
								filePath, // 必传，要上传的文件对象临时路径
								cloudPath: str, // 必传，保存在云端的文件名，这样写上传后就是原本的名称与后缀名
								success(res) {
									that.dataForm.img.push(res.fileID)
									uni.showToast({
										title: '上传成功',
										icon: 'success',
									});
								},
								fail(err) {
									console.log(err)
								},
								complete() {
									uni.hideLoading()
								}
							})
						}
					}
				})
			},

			confirmdate(e) {
				this.dataForm.time = e.value
				this.datetime = false
			},
			closeshow() {
				this.show = false
			},
			valChange(e) {
				console.log(e);
				this.dataForm.money += e;
			},
			backspace() {
				if (this.dataForm.money.length) this.dataForm.money = this.dataForm.money.substr(0, this.dataForm.money
					.length - 1);
			},
		}
	}
</script>

<style scoped lang="less">
	.add {
		background-color: #fff;

		image {
			width: 80rpx;
			height: 80rpx;
		}

		.submit {
			background: #007AFF;
			color: #fff;
			text-align: center;
			border-radius: 40rpx;
			padding: 20rpx;
			margin-top: 40rpx;
		}

		.top {
			background-color: #5DD98F;
			height: 150rpx;
			width: 100%;
		}

		.theme {
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: absolute;
			top: 80rpx;
			width: 80%;
			padding: 30rpx 50rpx;
			left: 30rpx;
			border-radius: 10rpx;
			box-shadow: 0 0 1px #666;

			.right {
				font-weight: bold;
				font-size: 34rpx
			}

			.left {
				display: flex;
				align-items: center;

				.image {
					margin-right: 40rpx;
				}
			}


		}

		.type {
			margin-top: 100rpx;
			padding: 30rpx;
			display: flex;
			flex-wrap: wrap;

			.box {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 25%;
				margin-bottom: 50rpx;
			}
		}

		.form {
			padding: 30rpx;

			.image {
				display: flex;
				flex-wrap: wrap;

				.box {
					position: relative;
					margin-right: 10rpx;

					.delet {
						position: absolute;
						background-color: red;
						border-radius: 50%;
						top: -10rpx;
						right: -10rpx;
						color: red;
						padding: 5rpx;
					}

				}



				image {
					margin-right: 10rpx;
				}
			}
		}
	}
</style>
<style>
	.add .u-safe-bottom {
		display: none;
	}

	.add .u-transition {
		background-color: transparent !important;
	}
</style>